<style scoped>
.p_c1{
    width:50%;float: left;padding-left: 10px;
    span{line-height: 22px;}
}
.i1{font-size:30px;cursor:pointer;position: absolute;left:-30px;top:50%;}
.i2{font-size:30px;cursor:pointer;position: absolute;right:-30px;top:50%;}
.dis{color:#ccc;}
.pp_cc{min-height: 200px;text-align: center;line-height: 200px;}
</style>
<template>
<div>
     <Modal v-model="modal" :title="title" :styles="{width:'1100px',top:'20px'}">
        <div style="margin-left:32px;width:1000px;position:relative;">
            
            <i  class="i1 ivu-icon ivu-icon-ios-arrow-back" :class="{dis:index==0}" @click="prev"></i>
            <i  class="i2 ivu-icon ivu-icon-ios-arrow-forward" :class="{dis:index==num}" @click="next"></i>
            <p style="text-align:center;">当前单据号:{{guid.orderNo}}</p>
            <p v-if="message!=''" class="pp_cc">{{message}}</p>
            <div v-else style="min-height:200px;">
           
                <p class="p_c1">
                    <b>销售方</b><br/>
                    <span>名称:&nbsp;&nbsp;{{data.mainVo.XSF_MC}}</span><br/>
                    <span>纳税人识别号:&nbsp;&nbsp;{{data.mainVo.XSF_NSRSBH}}</span><br/>
                    <span>地 址、电 话:&nbsp;&nbsp;{{data.mainVo.XSF_DZDH}}</span><br/>
                    <span>开户行及帐号:&nbsp;&nbsp;{{data.mainVo.XSF_YHZH}}</span><br/>
                </p> 
                <p><b>购买方</b> <br/>
                    <span>名称:&nbsp;&nbsp;{{data.mainVo.GMF_MC}}</span><br/>
                    <span>纳税人识别号:&nbsp;&nbsp;{{data.mainVo.GMF_NSRSBH}}</span><br/>
                    <span>地 址、电 话:&nbsp;&nbsp;{{data.mainVo.GMF_DZDH}}</span><br/>
                    <span>开户行及帐号:&nbsp;&nbsp;{{data.mainVo.GMF_YHZH}}</span><br/>
                </p>
                <div style="margin-top:10px;">
                    <div class="ivu-table-wrapper" >
                        <div class="ivu-table ivu-table-with-fixed-top ">
                            <div class="ivu-table-body" >
                                <table  class="table_border _table1"   cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                   
                                    <thead>
                                        <tr>
                                            <th class="" style="width:200px;">
                                                <div class="ivu-table-cell">
                                                    <span>货物或应税劳务、服务名称</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>规格型号</span>
                                                </div>
                                            </th>
                                            <th class=""  style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>单位</span>
                                                </div>
                                            </th>
                                            <th class=""  style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>数量</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>单价</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>  金额</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>  税率</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:100px;">
                                                <div class="ivu-table-cell">
                                                    <span>  税额</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="ivu-table-tbody" v-for="item in data.detailList">
                                        <tr class="ivu-table-row">
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsName}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsSpecification}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsUnit}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsQuantity}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                   <span>{{item.goodsPrice}}元</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                   <span>{{item.goodsTotalPrice}}元</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                   <span>{{item.goodsTaxRate}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                   <span>{{item.goodsTotalTax}}</span>
                                                </div>
                                            </td>
                                            
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                    </div>
                </div> 

            </div> 
        </div>     
         <div slot="footer">
             <Button @click="cancel()">关闭</Button>
             
         </div>
     </Modal>
</div>
</template>
<script>
 export default {
     data (){
         return {
             modal:false,title:'开票预览',status:'',
             data:{mainVo:{},},guid:{},list:[],index:0,num:0,message:''
         }
     },methods:{
        prev(){
            if(this.index>0){
                this.index-=1;
                this.guid=this.list[this.index];
                this.getdata();
            }
            
        },next(){
            if(this.index<this.num){
                this.index+=1;
                this.guid=this.list[this.index];
                this.getdata();
            }
        },
         showdata(params){
            console.log(params)
            this.list=params.data;
            this.index=-1;
            this.num=this.list.length-1;
            //this.data= {};
            this.index=0;
            this.guid=this.list[this.index]
            this.getdata();
            
            
            
         },getdata(){

            //if(this.index<this.num){
                //this.index+=1;
                //this.guid=this.list[this.index];

                this.axios.post('/outputinoivce/invoicePreview',
                    [this.guid.guid]).then((res)=>{
                    console.log(res)
                    if(!res.data){
                        //this.$Message.success(res.message);
                        this.message=res.message;
                    }else{
                        //this.$Message.error(res.message);
                        this.data=res.data;
                        this.message='';
                    }
                    this.modal=true;
                    
                })
                
            //}
         },
         cancel(){
             this.modal=false;
         },sub(){
            this.axios.post('/outputinoivce/makeByOrder',[this.guid]).then((res)=>{
                console.log(res);
                this.modal=false;
                if(res.errorCode==0){
                     this.$Message.success(res.message);
                     this.$emit('refresh')
                 }else{
                     //this.$Message.error(res.message);
                 }
                
                
            })
         }
     },created(){
         this.$bus.on('bus_setsedits', this.showdata);
         
     },beforeDestroy(){
         this.$bus.off('bus_setsedits',this.showdata)
     }
 }
</script>
